<template>
  <view class="main">
    <view class="back"></view>

    <view class="header"
          ref="header"
    >
      <view :style="{height: statusBarHeight + 'px'}"></view>
      <view class="header-title">
        <view
            @click="backRouter"
            style="position: absolute;top: 25rpx;left: 20rpx">
          <u-icon
              name="arrow-left"
              color="#fff" size="34"
          ></u-icon>
        </view>
        人员查询
      </view>
    </view>

    <view :style="{height: statusBarHeight + 'px'}"></view>
    <view style="height: 44px"></view>
    <sx-dropdown-menu :filter-data="menuNormal" @confirm="confirm" :current="currentMenu">
<!--      <template slot="radio">-->
<!--        <view class="box">-->
<!--          <view class="title">姓名</view>-->
<!--          <view class="flex items-center">-->
<!--            <view class="flex-1">-->
<!--              <input type="text" class="input" placeholder="请输入姓名" />-->
<!--            </view>-->
<!--          </view>-->
<!--        </view>-->
<!--      </template>-->
<!--      <template slot="radio">-->
<!--        <view class="box">-->
<!--          <view class="title">电话号码</view>-->
<!--          <view class="flex items-center">-->
<!--            <view class="flex-1">-->
<!--              <input type="text" class="input" placeholder="请输入姓名" />-->
<!--            </view>-->
<!--          </view>-->
<!--        </view>-->
<!--      </template>-->
    </sx-dropdown-menu>
    <!-- 输入框   customStyle-->
    <view style="padding: 10px 15px;background-color: white;">
<!--      <u&#45;&#45;input-->
<!--          v-model="mobile"-->
<!--          placeholder="请输入电话号码"-->
<!--          @change="mobileChange"-->
<!--          suffixIcon="search"-->
<!--          suffixIconStyle="color: #909399;font-size: 20px"-->
<!--          customStyle="border-radius: 20px;background-color: #f6f6f6"-->
<!--      ></u&#45;&#45;input>-->

      <u-search  v-model="mobile" height="70"
                 placeholder="请输入电话号码"
                 searchIconSize="35" :showAction="true"
                 actionText="搜索" @custom="mobileChange"
                 @search="mobileChange" :animation="true"></u-search>
    </view>


    <scroll-view
        @scrolltolower="scrolltolower"
        :style="{height: 'calc(100vh - ' + (statusBarHeight + headerHeight + 110 ) + 'px)'}"
        scroll-y
        >
      <view class="user-list">
        <view class="user-card" v-for="(item,index) in bodyData.content">
          <u-row style="width: 100%"  gutter="10">

            <u-col span="3">
              <view class="user-left">
                <view class="user-icon">
                  <image :src="$kt.file.visit(item.fileIdOfAvatar)" class="box-icon" />
                </view>
                <view class="user-name">{{ item.mobile }}</view>
              </view>
            </u-col>

            <u-col span="9">
              <view class="user-info" @click="navToUserInfo(item.id)">
                <view class="user-xueli">
                  <view>
                    {{item.workTime }}年 | {{ item.educationName }}
                  </view>
                  <view>
                    {{ item.currentTitleLevel.series.name?item.currentTitleLevel.series.name:"无" }}系列
                  </view>
                </view>
<!--                <view class="lever-box" style="display: flex;justify-content: space-between;align-items: center;margin-left: 10rpx;padding: 20rpx">-->
<!--                  <view class="lever">技能等级<view class="lever-value"> {{ item.currentSkillLevel.name }}</view></view>-->
<!--                  <view class="lever">职称等级<view class="lever-value"> {{item.currentTitleLevel.name}}</view></view>-->
<!--                  <view class="lever">人才等级<view class="lever-value"> {{ item.currentExpertTalentLevel.name }}</view></view>-->
<!--                </view>-->
                <view style="height: 15rpx"></view>
                <u-row style="width: 100%"  gutter="10" >
                  <u-col span="4" justify="center" textAlign="center">
                    <view class="lever">技能等级<view class="lever-value"> {{ item.currentSkillLevel.name?item.currentSkillLevel.name:"无"  }}</view></view>
                  </u-col>
                  <u-col span="4" justify="center" textAlign="center">
                    <view class="lever">职称等级<view class="lever-value"> {{item.currentTitleLevel.name?item.currentTitleLevel.name:"无"}}</view></view>
                  </u-col>
                  <u-col span="4" justify="center" textAlign="center">
                    <view class="lever">人才等级<view class="lever-value"> {{ item.currentExpertTalentLevel.name?item.currentExpertTalentLevel.name:"无" }}</view></view>
                  </u-col>
                </u-row>

              </view>
            </u-col>
          </u-row>
        </view>
        <view style="height: 30px" >
          <u-loadmore :status="status" iconSize="26" lineColor="#e4e4e4" :dashed="false" fontSize="28" :line="show" @loadmore="bodyDataPush" />
        </view>
      </view>



    </scroll-view>





  </view>
</template>

<script>


import URow from "../../uni_modules/uview-ui/components/u-row/u-row.vue";
import UIcons from "../../uni_modules/uview-ui/components/u-icon/u-icon.vue";
import emp from '@/js/emp.js';
export default {
  components: {UIcons, URow},
  data() {
    return {
      show: false,
      mobile: "",
      status: 'loading',
      // 状态栏高度
      statusBarHeight: 0,

      // 头部高度
      headerHeight: 0,
      currentMenu: 0,
      bodyData: {
        content: [],
        totalPage: 1
      },
      requestParam: {
        pageNumber: 1,
        pageSize: 6,
        data: {
          // 职称等级
          currentTitleLevelId: null,
          // 技能等级
          currentSkillLevelId: null,
          // 人才等级
          currentExpertTalentLevelId: null,
          //电话号码
          mobile: null
        }
      }, // 请求参数
      menuNormal: [
        // {
        //   name: "价格",
        //   type: "sort",
        //   submenu: [{
        //     submenu: [{
        //       name: "从低到高",
        //       value: "1",
        //     }, {
        //       name: "从高到低",
        //       value: "0",
        //     }]
        //   }]
        // }
        // 默认 学历 入职年份 筛选
        {
          //职称等级
          name: "职称等级",
          type: "hierarchy",

          submenu: []},
        {
          name: "技能等级",
          type: "hierarchy",
          submenu: [
            {
              name: "初级工",
              value: 1
            },
            {
              name: "中级工",
              value: 2
            },
            {
              name: "高级工",
              value: 3
            },
            {
              name: "技师",
              value: 4
            },
            {
              name: "高级技师",
              value: 5
            },
            {
              name: "特级技师",
              value: 6
            },
            {
              name: "首席技师",
              value: 7
            },
            {
              name: "学徒工",
              value: 8
            }


          ]
        },
        {
          name: "人才等级",
          type: "hierarchy",
          submenu: [
            {
              name: "专家",
              value: 1
            },
            {
              name: "优秀专家",
              value: 2
            },
            {
              name: "高级专家",
              value: 3
            },
            {
              name: "首席专家",
              value: 4
            },
            {
              name: "电科院院士",
              value: 5
            }
          ]
        },
        {
          name: '更多',
          icon: 'settings',
          type: 'radio',
          submenu: []
        }
      ]
    };
  },
  mounted() {
    // 设置状态颜色为白色
    uni.setNavigationBarColor({
      frontColor: '#ffffff',
    });
    // 获取状态栏高度
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
    // 获取头部高度
    uni.createSelectorQuery().in(this).select('.header').boundingClientRect((data) => {
      this.headerHeight = data.height;
      console.log("this.headerHeight",this.headerHeight)
      this.getAll();

    }).exec();

    ///

  },
  methods: {
    /**
     * 获取工作年限
     */
    getWorkTime(emp) {
      return 1;
    },
    /**
     * 获取学历
     */
    getEmpEducation(userInfo) {
      return emp.getEmpEducation(userInfo);
    },
    bodyDataPush(){
      console.log("bodyDataPush",this.requestParam)
      if (this.requestParam.pageNumber > this.bodyData.totalPage) {
        console.log("没有更多了");
        this.status = 'nomore';
        this.show = true;
        return;
      }

      // uni.showLoading({
      //   title: '加载中'
      // });
      this.show = false;
      this.status = 'loading';
      this.$requestSecurity({
        uri: "/emp/getAllEmpList",
        data: this.requestParam,
        stateSuccess: (res) => {
          this.bodyData.content = this.bodyData.content.concat(res.data.content);
          this.bodyData.totalPage = res.data.totalPage;
          this.requestParam.pageNumber++;
          this.status = 'loadmore';
          this.show = true;

          if (this.requestParam.pageNumber >= this.bodyData.totalPage) {
            this.status = 'nomore';
            this.show = true;
            return
          }


          // setTimeout(() => {
          //   uni.hideLoading();
          // }, 2000);

        },
        stateFail: (res) => {
          this.status = 'noMore';
        }
      });


    },
    scrolltolower() {
      console.log("加载更多")
      this.bodyDataPush();
    },
    mobileChange(mobile) {
      this.requestParam.data.mobile = mobile;
      this.requestParam.pageNumber = 1;
      console.log("requestParam",this.requestParam)
      this.bodyData = {
        content: [],
        totalPage: 1
      };
      this.bodyDataPush();
    },
    confirm(e) {
      console.log("e,e",e);
      //获取职称等级id
      if (e.value[0].length > 0 ){
        this.requestParam.data.currentTitleLevelId = e.value[0][1];
        console.log("职称等级id",this.requestParam.data.currentTitleLevelId)
      }


      //获取技能等级id
      if (e.value[1].length > 0 ){
        this.requestParam.data.currentSkillLevelId = e.value[1][0];
        console.log("技能等级id",this.requestParam.data.currentSkillLevelId)
      }

      //获取人才等级id
      if (e.value[2].length > 0 ){
        this.requestParam.data.currentExpertTalentLevelId = e.value[2][0];
        console.log("人才等级id",this.requestParam.data.currentExpertTalentLevelId)
      }

      //获取电话号码
      if (this.mobile ){
        this.requestParam.data.mobile = this.mobile;
      }
      this.requestParam.pageNumber = 1;

      console.log("请求参数",this.requestParam)

      this.bodyData = {
        content: [],
        totalPage: 1
      };
      this.bodyDataPush();

    },
    backRouter() {
      console.log("返回")
      //返回上一页
      uni.navigateBack();
    },
    navToUserInfo(empId) {
      uni.navigateTo({
        url: "/pages/user/userInfo?empId=" + empId
      });
    },
    getAll() {
      // 获取所有技能等级
      this.getAllSkillLevel();
      // 获取所有职称等级
      this.getAllTitleLevel();
      // 获取所有专家人才等级
      this.getAllExpertTalentLevel();

      this.bodyDataPush();
    },
    /**
     * 获取所有技能等级
     */
    getAllSkillLevel() {
      uni.showLoading({
        title: '加载中....'
      });
      this.$requestSecurity({
        uri: "/skillLevel/getAll",
        data: {},
        stateSuccess: (res) => {
          console.log(
              "技能等级",
              res.data
          )
          let submenu = []
          res.data.forEach(item => {
            submenu.push({
              name: item.name,
              value: item.id
            });
          });
          console.log("skillLevelsubmenu",submenu)
          this.menuNormal[1] = {
            name: "技能等级",
            type: "hierarchy",
            submenu: submenu
          }
          this.menuNormal = JSON.parse(JSON.stringify(this.menuNormal));
          uni.hideLoading();

        },
        stateFail: (res) => {
        }
      });
    },
    /**
     * 获取所有职称等级
     * /titleLevel/getAll
     */
    getAllTitleLevel() {
      uni.showLoading({ title: '加载中....' });
      this.$requestSecurity({
        uri: "/titleLevel/getAllService",
        data: {},
        stateSuccess: (res) => {
          let map = new Map();
          console.log("职称等级",res.data)

          res.data.forEach(item => {
            if (!item.seriesCode) return;

            if (!map.has(item.seriesCode)) {
              map.set(item.seriesCode, {
                name: item.series.name,
                value: item.series.id,
                submenu: []
              });
            }
            map.get(item.seriesCode).submenu.push({
              name: item.name,
              value: item.id
            });
          });




          this.menuNormal[0] = {
            name: "职称等级",
            type: "hierarchy",
            submenu: Array.from(map.values())
          };
          this.menuNormal = JSON.parse(JSON.stringify(this.menuNormal));

          uni.hideLoading();
        },
        stateFail: (res) => {
          // 失败处理逻辑，可以根据需要添加
        }
      });
    },
    /**
     * 获取所有专家人才等级
     * /expertTalentLevel/getAll
     */
    getAllExpertTalentLevel() {
      uni.showLoading({
        title: '加载中....'
      });
      this.$requestSecurity({
        uri: "/expertTalentLevel/getAll",
        data: {},
        stateSuccess: (res) => {
          let submenu = []
          res.data.forEach(item => {
            submenu.push({
              name: item.name,
              value: item.id
            });
          });
          this.menuNormal[2] = {
            name: "人才等级",
            type: "hierarchy",
            submenu: submenu
          }
          this.menuNormal = JSON.parse(JSON.stringify(this.menuNormal));
          uni.hideLoading();
        },
        stateFail: (res) => {
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 999;
  color: #ffffff;
  background: #0B8D80;
}


.back {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: #F5F5F5;
  top: 0;
  left: 0;
  z-index: -1;
}

.box {
  padding: 30rpx;
  box-sizing: border-box;
  text-align: center;
}

.main {
  position: absolute;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background-color: #f3f3f3;
}

.bom {
  position: relative;
  top: -30px;
  padding: 20rpx;
  box-sizing: border-box;
  border-top-left-radius: 40rpx;
  border-top-right-radius: 40rpx;
  background-color: #ffffff;
  height: calc(100vh - 120px - 44px - 44px);
}

.box-title {
  font-size: 24rpx;
  color: #333333;
  text-align: left;
  font-weight: bold;
}

.split-height {
  height: 20rpx;
}

.box-icon {
  width: 70rpx;
  height: 70rpx;
}

.box-text {
  font-size: 24rpx;
  color: #333333;
}

.in-box {
  background-color: #FFFFFF;
  width: calc(100% - 40rpx);
  padding: 20rpx;
  box-sizing: border-box;
  border-radius: 20rpx;
  margin: 20rpx 20rpx 20rpx 0;
  text-align: center;
}

.header-title {
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-size: 36rpx;
  color: #ffffff;
  position: relative;
}


.flex-name {
  color: #ffffff;
}

.flex-box {
  color: white;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: left;
  margin-top: 20rpx;
}

.flex-unit {

}

.flex-text {
  margin-left: 10px;
}





.user-list {
  padding: 5px;
}

.user-card {
  background: #ffffff;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
}

.user-left{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  //右线
  border-right: 2px solid #f0f0f0;

}
.user-icon {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background-color: #3c9cff;


}
.box-icon {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
}
.user-name {
  font-size: 20rpx;
  font-weight: bold;
  margin-top: 20rpx;
}
.user-xueli {
  font-size: 20rpx;
  color: #999;
  margin-top: 20rpx;
  padding-left: 20rpx;
  padding-bottom: 10rpx;
  //下线
  border-bottom: 4rpx solid #f0f0f0;
  display: flex;
  justify-content: space-between;
}
.lever-box {
  //多出省略号隐藏
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lever {
  font-size: 24rpx;
  color: #999;
  margin-top: 4rpx;
}
.lever-value {
  font-size: 24rpx;
  color: #333;
  margin-top: 4rpx;
  //多出省略号隐藏
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

}
</style>
